<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <link rel="shortcut icon" href="../../public/logo-mi2.ico" type="image/x-icon">
</head>

<body>
    <!-- -------- 侧边工具组 --------  -->
    <!-- #region  -->
    <div class="sidebar-tool-wrap">
        <div class="sg-tool-item to-top">
            <i class="layui-icon layui-icon-top"></i>
            <section>回到顶部</section>
        </div>
    </div>
    <!-- #endregion  -->
    <!-- -------------------  -->

    <div class="main-container">

        <!-- -------- 顶部链接 --------  -->
        <!-- #region  -->
        <nav class="main-nav-wrap">
            <div class="nav-wrap">
                <section class="nav-item-wrap nav-left-wrap">
                    <ul>
                        <li class="sg-nav-item"><a href="javascript:;">小米商城</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">MIUI</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">IoT</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">云服务</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">天星数科</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">有品</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">小爱开放平台</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">企业团购</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">资质证照</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">协议规则</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">下载App</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">智能生活</a></li>
                    </ul>
                </section>
                <section class="nav-item-wrap nav-right-wrap">
                    <ul>
                        <li class="sg-nav-item"><a href="./login.html">登录</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">注册</a></li>|
                        <li class="sg-nav-item"><a href="javascript:;">消息通知</a></li>

                        <li class="sg-nav-item cart-item">
                            <a href="javascript:;">
                                <i class="layui-icon layui-icon-cart"></i>
                                购物车
                            </a>
                            <section class="cart-wrap">
                                购物车中还没有商品, 赶紧选购吧!
                            </section>
                        </li>
                    </ul>
                </section>
            </div>
        </nav>
        <!-- #endregion  -->
        <!-- -------------------  -->

        <!-- -------- 导航栏 --------  -->
        <!-- #region  -->
        <header class="main-header-wrap">
            <section class="header-wrap">

                <!-- 图标 -->
                <div class="header-wrap-left">
                    <a class="site-icon" href="./index.html">
                        <img src="../../public/logo-mi2.ico" alt="">
                    </a>
                </div>

                <!-- 导航栏 -->
                <div class="header-wrap-center">
                    <section id="has-dropdown" class="sg-dropdown-item has-dropdown">
                        <a id="has-dropdown" href="javascript:;">
                            Xiaomi手机
                        </a>
                    </section>
                    <section id="has-dropdown" class="sg-dropdown-item has-dropdown">
                        <a id="has-dropdown" href="javascript:;">Redmi手机</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">电视</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">笔记本</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">平板</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">家电</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">路由器</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">服务中心</a>
                    </section>
                    <section class="sg-dropdown-item">
                        <a href="javascript:;">社区</a>
                    </section>
                </div>

                <!-- 搜索框 -->
                <div class="header-wrap-right">
                    <div class="search-wrap">
                        <section class="search-input-wrap">
                            <input type="search" id="search-input" placeholder="耳机">
                        </section>

                        <section class="search-icon">
                            <i class="layui-icon layui-icon-search"></i>
                        </section>
                    </div>
                </div>

                <div id="has-dropdown" class="dropdown-board"> </div>
            </section>

        </header>
        <!-- #endregion  -->
        <!-- -------------------  -->

        <!-- -------- 主要板块 --------  -->
        <!-- #region  -->
        <section class="main-center-wrap">
            <!-- -------- 轮播图 --------  -->
            <!-- #region  -->
            <section class="swiper-wrap">
                <!-- 轮播图侧栏 -->
                <div class="swiper-wrap-left">
                    <!-- -------- name --------  -->
                    <!-- #region  -->
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">手机</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>

                        <section class="item-sider-collapse-board"></section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">电视</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            <!-- -------- name --------  -->
                            <!-- #region  -->
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <div class="sg-goods-list-item">
                                <section class="item-img">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c13977eeb29cd4b2fbbe803ef5884176.png?width=80&height=80"
                                        alt="">
                                </section>
                                <section class="item-title">Redmi Note 12 Pro+</section>
                            </div>
                            <!-- #endregion  -->
                            <!-- -------------------  -->
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">家电</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            3
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">平板</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            4
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">穿戴</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            5
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">耳机</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            6
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">健康</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            7
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">生活</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            8
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">智能</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            9
                        </section>
                    </div>
                    <div class="sg-swiper-collapse-item">
                        <section class="item-info">
                            <span class="item-title">电源</span>
                            <i class="layui-icon layui-icon-right"></i>
                        </section>
                        <section class="item-sider-collapse-board">
                            10
                        </section>
                    </div>
                    <!-- #endregion  -->
                    <!-- -------------------  -->
                </div>

                <!-- 轮播图 -->
                <div class="swiper-wrap-right">
                    <div class="swiper"></div>

                    <div class="circle-wrap">
                        <div class="sg-cirlce"></div>
                        <div class="sg-cirlce active"></div>
                    </div>

                    <div class="change-swiper-btn prev">&lt;</div>
                    <div class="change-swiper-btn next">&gt;</div>
                </div>
            </section>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 分类和推荐 --------  -->
            <!-- #region  -->
            <section class="cate-and-recommend-wrap">

                <div class="cate-wrap">
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-time"></i>
                        <span class="title">小米秒杀</span>
                    </div>
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-gift"></i>
                        <span class="title">企业团购</span>
                    </div>
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-group"></i>
                        <span class="title">F码通道</span>
                    </div>
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-form"></i>
                        <span class="title">米粉卡</span>
                    </div>
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-note"></i>
                        <span class="title">以旧换新</span>
                    </div>
                    <div class="sg-cate-item">
                        <i class="layui-icon layui-icon-cellphone"></i>
                        <span class="title">话费充值</span>
                    </div>
                </div>

                <div class="sg-recommend-wrap">
                    <img src="https://i1.mifile.cn/a4/xmad_1564584687704_fIYFd.jpg" alt="">
                </div>
                <div class="sg-recommend-wrap">
                    <img src="https://i1.mifile.cn/a4/xmad_15632000838536_bfVMh.jpg" alt="">
                </div>
                <div class="sg-recommend-wrap">
                    <img src="https://i1.mifile.cn/a4/xmad_15604776623629_bRHhl.jpg" alt="">
                </div>
            </section>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 小米闪购 --------  -->
            <!-- #region  -->
            <div class="cate-header">小米闪购</div>
            <div class="time-limit-wrap">
                <div class="time-limit-list">
                    <div class="list-item red empty">
                        <i class="layui-icon layui-icon-time"></i>
                        <p>暂无闪购活动</p>
                    </div>
                    <div class="list-item yellow">
                        <div class="time-wrap">
                            <section class="hour">
                                <div class="tens-place">0</div>
                                <div class="ones-place">0</div>
                            </section>
                            <section class="time-divide">:</section>
                            <section class="minute">
                                <div class="tens-place">0</div>
                                <div class="ones-place">0</div>
                            </section>
                            <section class="time-divide">:</section>
                            <section class="second">
                                <div class="tens-place">0</div>
                                <div class="ones-place">0</div>
                            </section>
                        </div>
                    </div>
                    <div class="list-item green">

                    </div>
                    <div class="list-item blue"> </div>
                    <div class="list-item pink"> </div>
                </div>
            </div>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 长条推荐(?广告) --------  -->
            <!-- #region  -->
            <div class="banner-ad-wrap">
                <img src="https://i1.mifile.cn/a4/xmad_15645848093783_hFAUp.jpg" alt="">
            </div>
            <!-- #endregion  -->
            <!-- -------------------  -->


            <!-- -------- 商品种类 --------  -->
            <!-- #region  -->
            <div class="cate-header has-tab-field">
                <span>家电</span>
                <section class="tab-field">
                    <div class="sg-tab-item appliances-tab active">热门</div>
                    <div class="sg-tab-item appliances-tab">电视影音</div>
                    <div class="sg-tab-item appliances-tab">电脑</div>
                    <div class="sg-tab-item appliances-tab">家居</div>
                </section>
            </div>
            <section class="sg-main-category-wrap appliances-wrap">
                <div class="main-category-wrap">
                    <div class="sg-cate-goods-item col">
                        <section class="col-item">
                            <img src="https://i1.mifile.cn/a4/xmad_15608266264545_qWIRv.jpg" alt="">
                        </section>
                        <section class="col-item">
                            <img src="	https://i1.mifile.cn/a4/xmad_15608266614476_wdGNy.jpg" alt="">
                        </section>
                    </div>
                    <div class="sg-cate-goods-item row"></div>
                </div>
            </section>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 长条推荐(?广告) --------  -->
            <!-- #region  -->
            <div class="banner-ad-wrap">
                <img src="https://i1.mifile.cn/a4/xmad_1565158413055_UEszn.jpg" alt="">
            </div>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 为你推荐 --------  -->
            <!-- #region  -->
            <div class="main-recommend-wrap">
                <div class="cate-header has-tab-field">
                    <span>为你推荐</span>
                    <section class="tab-field">
                        <div class="sg-tab-item recommend-arrow prev disable">&lt;</div>
                        <div class="sg-tab-item recommend-arrow next">&gt;</div>
                    </section>
                </div>
                <section class="recommend-list">
                    <div class="sg-cate-goods-item row"></div>
                </section>
            </div>
            <!-- #endregion  -->
            <!-- -------------------  -->

            <!-- -------- 热评产品 --------  -->
            <!-- #region  -->
            <div class="main-comment-wrap">
                <div class="cate-header has-tab-field">
                    <span>热评产品</span>
                </div>
                <section class="comment-list">
                    <div class="sg-cate-goods-item row"></div>
                </section>
            </div>
            <!-- #endregion  -->
            <!-- -------------------  -->

        </section>
        <!-- #endregion  -->
        <!-- -------------------  -->


        <!-- -------- 页脚 --------  -->
        <!-- #region  -->
        <footer class="main-footer-wrap">
            <div class="footer-wrap">
                <section class="footer-col">
                    <div class="col-header">帮助中心</div>
                    <div class="col-item">售后政策</div>
                    <div class="col-item">自助服务</div>
                    <div class="col-item">订单操作</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">服务支持</div>
                    <div class="col-item">账户管理</div>
                    <div class="col-item">购物指南</div>
                    <div class="col-item">相关下载</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">线下门店</div>
                    <div class="col-item">小米之家</div>
                    <div class="col-item">服务网点</div>
                    <div class="col-item">授权体验店</div>
                </section>
                <section class="footer-col">
                    <div class="col-header">关于小米</div>
                    <div class="col-item">了解小米</div>
                    <div class="col-item">投资者关系</div>
                    <div class="col-item">廉洁举报</div>
                </section>

                <section class="footer-col else-info">
                    <p class="phone">400-100-5678</p>
                    <p class="time">9:00-18:00（仅收市话费）</p>
                    <section class="btn btn-primary">人工客服</section>
                    <div class="follow">
                        关注小米：
                        <span><i class="layui-icon layui-icon-login-wechat"></i></span>
                        <span><i class="layui-icon layui-icon-login-weibo"></i></span>
                    </div>
                </section>
            </div>
        </footer>
        <!-- #endregion  -->
        <!-- -------------------  -->
    </div>

    <script src="../js/index.js"></script>
</body>

</html>